<template>
  <div>
    <div class="app">
      <!-- 头部 -->
      <div class="header">
        <div class="logo">
          <span class="spanimg" @click="Jump_home"></span
          ><span class="longspan">排行榜</span>
        </div>
        <!-- <div class="header-tools">
          <div><span class="ht-btn1"></span></div>
          <div class="header-tools1">
            <span class="ht-btn2" @click="falgs"></span>
            <div class="header-tools1-1" v-show="falg">
              <div><span class="span1-1"></span><span>书架</span></div>
              <div><span class="span1-2"></span><span>我的</span></div>
            </div>
          </div>
          <div><span class="ht-btn3" @click="Jump_home"></span></div>
        </div> -->
      </div>
      <div class="Navigation">
        <van-tabs @click="setsort_type">
          <van-tab
            v-for="item in toplist"
            :title="item.name"
            :key="item.sort_type"
            
          >
            <!-- 漫画排行列表 -->
            <div class="zp-list2">
              <div
                class="zp-list2-li"
                v-for="item in topdatalist"
                :key="item.comic_id"
                 @click="Jump_pre(item.comic_id,item.comic_name)"
              >
                <div class="zp-list2-li1">
                  <img :src="item.imgurl" alt="" />
                </div>
                <div class="zp-list2-li2">
                  <p>{{ item.comic_name }}</p>
                  <div class="zp-list2-li2-s zp-list2-li2-1">
                    {{ item.author_name }}
                  </div>
                  <div class="zp-list2-li2-s zp-list2-li2-2">
                    <span v-for="ele in item.cartoon_type_list" :key="ele.id"
                      >{{ ele.name }}&nbsp;</span
                    >
                  </div>
                </div>
                <div class="ranking-num">
                  <span class="ranking-img" v-show="item.rownum==1"></span>
                      <div class="img2-2" v-if="item.rownum==2">
                        <img src="../../public/assets/images-index/rank_3.png" alt="">
                      </div>
                          <span class="ranking-img3" v-show="item.rownum==3"></span>
                  <span class="ranking-text" v-show="item.rownum>3">{{item.rownum>=10?item.rownum:'0'+item.rownum}}</span>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>
<script>
// import {getUpData} from "../api/UpData";
export default {
  data() {
    return {

      toplist: [
        { name: "综合榜", sort_type: "all" },
        { name: "自制榜", sort_type: "self" },
        { name: "新作榜", sort_type: "new" },
        { name: "黑马榜", sort_type: "dark" },
        { name: "免费榜", sort_type: "free" },
        { name: "少年榜", sort_type: "boy" },
        { name: "少女榜", sort_type: "girl" },
        { name: "连载榜", sort_type: "serialize" },
        { name: "完结榜", sort_type: "finish" },
        { name: "付费榜", sort_type: "charge" },
      ],
      sort_type: "all",
      topdatalist: "",
    };
  },
  created() {
    this.gettoplist();
  },
  methods: {
    Jump_home() {
        this.$router.go(-1)
    },
    Jump_pre(id,name){
            this.$emit('getid',id)
          this.$router.push({name:'pre'})
          this.$emit('getcomicname',name)
        },


 
    gettoplist() {
      this.$axios({
        url: `https://www.kanman.com/api/getRankDataForWeb?isalldata=0&time_type=week&sort_type=${this.sort_type}&rank_type=heat&page=1&pageSize=30`,
        method: "get"
      }).then((data) => {
        console.log(data.data.data.list);
        this.topdatalist = data.data.data.list;
        this.topdatalist.forEach((item) => {
          this.$set(
            item,
            "imgurl",
            `https://image.yqmh.com/mh/${item.comic_id}.jpg`
          );
        });

      });
    },
    setsort_type(name){
// console.log(name);
this.sort_type=this.toplist[name].sort_type
    }
  },
  watch:{
    sort_type(){
      this.gettoplist()
    }
  }
};
</script>
<style scoped>
.app {
  background-color: rgb(242, 242, 242);
}

/* 头部 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 53px;
  background-color: #fff;
  padding: 13px 13px 0 13px;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  z-index: 999;
}
.logo {
  width: 100px;
  height: 26.5px;
  margin-right: 110px;
  line-height: 26.5px;
}
.spanimg {
  display: inline-block;
  width: 18px;
  height: 30px;
   background: url(../../public/assets/images-index/zjt.png) no-repeat;
  background-size: 70% 70%;
}
.longspan {
  font-size: 18px;
  display: inline-block;
  color: #333;
  margin-left: 12px;
  font-weight: 800;
  position: relative;
  top: -13px;
}

/* 导航 */
.Navigation {
  width: 100%;
  height: 50px;
  margin-top: 53px;
}
/* 漫画排行列表  */

.zp-list2-li {
  position: relative;
  box-sizing: border-box;
  padding: 5px 8px 8px 8px;
  display: flex;
  background-color: #fff;
  width: 100%;
  height: 115px;
  border-top: 5px solid #f2f2f2;
}
.zp-list2-li1 {
  width: 22%;
  height: 100%;
}
.zp-list2-li1 img {
  width: 100%;
  height: 100%;
}
.zp-list2-li2 {
  width: 78%;
  padding: 5px 8px 8px 8px;
}
.zp-list2-li2 p,
.zp-list2-li2 div {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.zp-list2-li2 p {
  color: #333;
  font-size: 18px;
}
.zp-list2-li2 > div {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}
.zp-list2-li2-s {
  position: relative;
}
.zp-list2-li2-s::after {
  position: absolute;
  content: "";
  display: block;
  width: 11px;
  height: 12px;
  top: 6px;
  left: -12px;
  background-image: url(../../public/assets/images-index/sprite3.png);
  background-size: 52px 12px;
}
.zp-list2-li2-2::after {
  background-position: -18px 0px;
}
.ranking-num {
  position: absolute;
  top: 11px;
  right: 20px;
}
.ranking-img {
  display: block;
  width: 40px;
  height: 47px;
  background: url(../../public/assets/images-index/rank_2.png);
  background-size: 100% 100%;
};
.img2-2{
   display: block !important;
  width: 40px;
  height: 47px;
  /* background: url(../../public/assets/images-index/rank_2.png) !important;
  background-size: 100% 100%; */
}
.img2-2 img{
  width: 40px;
  height: 47px;
}
.ranking-img3{
   display: block;
  width: 40px;
  height: 47px;
  background: url(../../public/assets/images-index/rank_4.png);
  background-size: 100% 100%;
}
.ranking-text {
  display: block;
  width: 33px;
  height: 27px;
  font-size: 27px;
  color: #c5c5c5;
  font-weight: 800;
  /* display: none; */
}
</style>